<template>
	<view class="page-parent">
		<nav-bar>
			<view slot="right" style="margin-right: 20upx; width: 75vw;display: flex;flex-direction: row;justify-content: space-between;">

				<view style="width: 70%;">
					<uni-segmented-control :current="current" :values="tabItemStr" style-type="button" active-color="#007aff" @clickItem="changeTab" />
				</view>
				<image v-if="false" class="nav-right-icon" :src="navRightUrl" @click="onNavRightClick"></image>
			</view>
		</nav-bar>

		<view class="uni-padding-wrap uni-common-mt">
			<view view v-if="current === 1">
				<view class="notice-base" v-for="(item,index) in curseList" :key="index">
					<view class="notice-item">
						<view class="item-one">
							<view class="item-one-icon"></view>
							<view class="item-one-left">{{item.Title}}</view>
							<view class="item-one-right">{{item.CreateTime.split(' ')[1]}}</view>
						</view>
						<view class="item-two">
							<view class="item-two-left">{{item.MessageText}}</view>
							<!-- <view class="item-dot"></view> -->
						</view>
					</view>
				</view>
			</view>

			<view view v-if="current === 0">
				<!-- <view class="text-other" v-for="(num,index) in noticeList" :key="index">list - {{num}}</view> -->
				
				<view class="notice-base" v-for="(item,index) in noticeList" :key="index">
					<view class="notice-item">
						<view class="item-one">
							<view class="item-one-icon"></view>
							<view class="item-one-left">{{item.Title}}</view>
							<view class="item-one-right">{{item.CreateTime.split(' ')[1]}}</view>
						</view>
						<view class="item-two">
							<rich-text class="item-two-left" :nodes="item.Des"></rich-text>
							<!-- <view class="item-dot"></view> -->
						</view>
					</view>
				</view>
				
			</view>

			<!-- <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view> -->
		</view>

		<view class="shade" v-show="showPopupShade" @tap="hidePop">
			<view class="pop" :style="popStyle" :class="{'show':showPop}">
				<view v-for="(item,index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getConcernsMsgByUserID,
		getNoticeByUserID
	} from "@/services/message.js";
	import CONSTS from '@/common/biz/consts.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo'])
		},

		data() {
			return {
				emptyImg: '/static/' + 'noAddCourse.svg',
				rightUrl: '/static/' + 'right-arrow-gray.png',
				navRightUrl: '/static/' + 'icon_more.png',

				/* 显示/隐藏遮罩*/
				showPopupShade: false,
				/* 显示操作弹窗 */
				showPop: false,
				/* 弹窗定位样式 */
				popStyle: "",
				/* 弹窗按钮列表 */
				popButton: ["全部标记为已读", "查看历史"],

				tabItemStr: ['通知', '警报'],
				current: 0,

				data: [],
				data_other: [],
				loadMoreText: "加载中...",
				showLoadMore: false,

				searchNoticePage: 0,
				searchWarnPage: 0,
				curseList: [],
				noticeList: [],
			};
		},

		onLoad: function() {
			uni.getSystemInfo({
				success: (res) => {
					this.winSize = {
						"witdh": res.windowWidth,
						"height": res.windowHeight
					}
				}
			})

			// this.getDirList(this.searchPage + 1);
			// this.initData();
			// this.getDirList(this.searchPage + 1);
			this.getNoticeData(this.searchNoticePage + 1)
			this.getWarnData(this.searchWarnPage + 1)
		},

		onUnload() {
			this.max = 0,
				this.data = [],
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
		},
		
		onReachBottom() {
			// debugger
			console.log("onReachBottom");
			this.status = 'more';
			if(this.current == 0)
				this.getNoticeData(this.searchNoticePage + 1);
			else if(this.current == 1)
				this.getWarnData(this.searchWarnPage + 1);
			this.showLoadMore = true;
		},
		
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			if(this.current == 0){
				this.searchNoticePage = 0;
				this.getNoticeData(this.searchNoticePage + 1);
			}
			else if(this.current == 1) {
				this.searchWarnPage = 0;
				this.getWarnData(this.searchWarnPage + 1);
			}
		},


		methods: {
			onNavRightClick(e) {
				// debugger
				var _self = this;
				let [touches, style, index] = [e.touches[0], "", e.currentTarget.dataset.index];
				style = `top:${touches.clientY}px;`;
				style += `right:${this.winSize.witdh-touches.clientX}px`;

				this.popStyle = style;
				this.showPopupShade = true;

				this.$nextTick(() => {
					setTimeout(() => {
						_self.showPop = true;
					}, 10);
				});
			},

			/* 隐藏弹窗 */
			hidePop() {
				var _self = this;
				this.showPop = false;
				this.showPopupShade = false;
			},

			/* 选择菜单 */
			pickerMenu(e) {
				let index = Number(e.currentTarget.dataset.index);
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/message/histroyMessage'
					})
				} else if (index == 0) {
					this.changeMessageState();
				}

				this.hidePop();
			},


			changeTab(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},

			initData() {
				setTimeout(() => {
					this.max = 0;
					this.data = [];
					let data = [];
					this.max += 10;
					for (var i = this.max - 9; i < this.max + 1; i++) {
						data.push(i)
					}
					this.data = this.data.concat(data);
					uni.stopPullDownRefresh();
				}, 300);
			},
			setListData() {
				let data = [];
				this.max += 10;
				for (var i = this.max - 9; i < this.max + 1; i++) {
					data.push(i)
				}
				this.data = this.data.concat(data);
			},

			getNoticeData(inPage){
				getNoticeByUserID({
					UserId: this.userInfo.userEntity.userId,
					page: inPage,
					linit: CONSTS.PAGE_DEFAULT_LIMIT,
					IsRead: 1  // 1=所有  2=未读 3=已读
				}).then((res) => {
					// debugger
					if (inPage == 1)
						this.noticeList = [];
					let tempData = res.data;
					this.noticeList = this.noticeList.concat(tempData);
					if(tempData.length > 0)
						this.searchNoticePage = this.searchNoticePage + 1;
						
					uni.stopPullDownRefresh();
				} )
			},
			
			getWarnData(inPage){
				getConcernsMsgByUserID({
					UserId: this.userInfo.userEntity.userId,
					page: inPage,
					linit: CONSTS.PAGE_DEFAULT_LIMIT,
					IsRead: 1  // 1=所有  2=未读 3=已读
				}).then((res) => {
					// debugger
					if (inPage == 1)
						this.curseList = [];
					let tempData = res.data;
					this.curseList = this.curseList.concat(tempData);
					if(tempData.length > 0)
						this.searchWarnPage = this.searchWarnPage+ 1;
				
					uni.stopPullDownRefresh();
				} )
			},

			changeMessageState() {
				let params = []
				this.curseList.forEach(element => {
					if (this.curseList.indexOf(this.userInfo.userEntity.userId) <= 0) {
						let json = JSON.parse(element.Json)
						json.push(this.userInfo.userEntity.userId)
						params.push({
							ID: element.ID,
							Json: JSON.stringify(json)
						})
					}
				})
				console.log(params)
				
				if(params.length  == 0) {
					uni.showToast({
						title:"暂无未读信息"
					})
					// return;
				}
				
				this.doUpdateMessageState(params);
			},
			
			doUpdateMessageState(params) {
				var _self = this;
				updateConcernsMsg({
					ArrParam: params
				}).then((res) => {
					if (res.code == '000000') {
						uni.showToast({
							title:"状态更新完成"
						})
						// this.onPullDownRefresh();
						uni.startPullDownRefresh();
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-parent {
		height: 100vh;
	}

	.nav-right-icon {
		width: 48upx;
		height: 48upx;
	}

	/* 遮罩 */
	.shade {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-touch-callout: none;
		background-color: rgba(0, 0, 0, 0.7);

		.pop {
			position: fixed;
			z-index: 1001;
			width: 200upx;
			box-sizing: border-box;
			font-size: 28upx;
			text-align: left;
			color: #333;
			background-color: #fff;
			box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
			line-height: 80upx;
			transition: transform 0.15s ease-in-out 0s;
			user-select: none;
			-webkit-touch-callout: none;
			transform: scale(0, 0);

			&.show {
				transform: scale(1, 1);
			}

			&>view {
				padding: 0 20upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				user-select: none;
				-webkit-touch-callout: none;

				&:active {
					background-color: #f3f3f3;
				}
			}
		}
	}

	.text {
		margin: 16rpx 0;
		width: 100%;
		background-color: #fff;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #555;
		border-radius: 8rpx;
	}

	.text-other {
		margin: 16rpx 0;
		width: 100%;
		background-color: #f0f;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #555;
		border-radius: 8rpx;
	}


	.notice-base {
		flex-direction: row;
	}

	.notice-item {
		position: relative;
		display: flex;
		flex-direction: column;

		margin: 20upx 20upx 0upx 20upx;
		padding: 18upx 22upx 18upx 22upx;

		background: #FFFFFF;
		box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.05);
		border-radius: 4px;


	}

	.item-one {
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.item-one-icon {
		width: 6upx;
		height: 24upx;
		background-color: #007AFF;
	}

	.item-one-left {
		width: 60vw;
		font-size: 32upx;
		margin-left: 24upx;
		color: rgba(0, 0, 0, 1);
	}

	.item-one-right {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.25);
	}

	.item-dot {
		width: 10px;
		height: 10px;
		background-color: #FF0000;
		margin-right: 10px;
		border-radius: 50%;
	}

	.item-two {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 24upx;
		justify-content: space-between;
	}

	.item-two-left {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.45);
		line-height: 16px;
	}

	.notice-b-base {
		position: relative;
		display: flex;
		flex-direction: row;
		margin: 20upx 20upx 0upx 20upx;
		padding: 18upx 22upx 18upx 22upx;
		background: #FFFFFF;
		box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.05);
		border-radius: 4px;

		align-items: center;
	}

	.arrow-right {
		width: 32upx;
		height: 32upx;
		right: 4upx;
		position: absolute;
	}
</style>
